<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" th:href="@{/lib/layui-v2.5.5/css/layui.css}" media="all">
		<link rel="stylesheet" th:href="@{/css/public.css}" media="all">
	</head>
	<body>
		<div class="layuimini-container">
			<div class="layuimini-main">

				<fieldset class="table-search-fieldset">
					<legend>查询订单</legend>
					<div style="margin: 10px 10px 10px 10px">
						<form class="layui-form layui-form-pane" action="">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">订单条目号</label>
									<div class="layui-input-inline">
										<input type="hidden" name="merchantId" id="merchantId"  />
										<input type="text" name="itemId" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">用户id</label>
									<div class="layui-input-inline">
										<input type="text" name="id" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">商品名字</label>
									<div class="layui-input-inline">
										<input type="text" name="name" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
								<div class="layui-inline">
									<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i>
										查询
									</button>
								</div>
							</div>
						</form>
					</div>
				</fieldset>




				
					<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
				



			</div>
		</div>
		<script th:src="@{/lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>
		<script th:inline="none">
			layui.use(['form', 'table', 'laydate'], function() {
				var $ = layui.jquery,
					form = layui.form,
					table = layui.table,
					laydate = layui.laydate;
					
				var merchantId = "001";
				$("#merchantId").val(merchantId);

				laydate.render({
					elem: '#date',
					type: 'datetime',
					format: 'yyyy-MM-dd HH:mm:ss',
					max: 'new Date()'
				});
				
				var tableIns = null;

				// 监听搜索操作
				//多条件查询，带分页
				form.on('submit(data-search-btn)', function(data) {
					console.log("前端参数:" + JSON.stringify(data.field));
					var jsonstr = JSON.stringify(data.field);
					tableIns = table.render({
						elem: '#currentTableId',
						url: '/initOrderByCondition',
						method: "post",
						contentType: 'application/json;charset=utf-8',
						where: {
							jsonstr: jsonstr
						},
						parseData: function(res) {
							return {
								"code": res.code,
								"msg": res.msg,
								"count": res.count,
								"data": res.data[0].list
							}
						},
						initSort: {
							field: 'subtotal',
							type: 'desc'
						},
						toolbar: '#toolbarDemo',
						defaultToolbar: ['filter', 'exports', 'print', {
							title: '提示',
							layEvent: 'LAYTABLE_TIPS',
							icon: 'layui-icon-tips'
						}],
						cols: [
							[{
									type: "checkbox",
									width: 50
								},
								{
									field: 'itemId',
									width: 200,
									title: '订单条目号',
									sort: true
								},
								{
									field: 'name',
									width: 200,
									title: '商品名字',
									sort: true
								},
								{
									field: 'price',
									width: 150,
									title: '价格',
									sort: true
								},
								{
									field: 'count',
									width: 200,
									title: '数量',
									sort: true
								},
								{
									field: 'subtotal',
									width: 100,
									title: '小计',
									sort: true
								},
								{
									field: 'id',
									width: 100,
									title: '用户id',
									sort: true
								},
							]
						],
						limit: 10,
						limits: [10, 15, 20, 25, 50, 100],
						page: true,
						skin: 'row'

					});


					return false;
				});



			});
		</script>

	</body>
</html>
